<template>
  <div>
    <!--查看报告 -->
    <el-dialog title="查看报告" :visible.sync="openReport" width="1200px" append-to-body
               :close-on-click-modal="false" v-if="openReport">
      <el-form ref="formOpen" :model="formOpen" label-width="100px" size="small">
        <div style="height: 600px;overflow-y:scroll ">
          <el-form-item label="检验结果/报告">
            <el-tabs v-model="activeNames" type="border-card" @click="handleClick">
              <el-tab-pane :key="index" v-for="(item, index) in formOpen.tableResults.report" :label="item.batch_no"
                           :name="item.batch_no">
                <el-form-item label="检验结论：">
                  <span v-if="item.inspection_conclusion === 1 ">合格</span>
                  <span v-if="item.inspection_conclusion === 2 ">不合格</span>
                  <span v-if="item.inspection_conclusion === 3 ">无结论</span>
                </el-form-item>
                <el-form-item label="稳定性统计数据：" v-if="rowList.inspection_type === 'inspection_type_wd' "
                              label-width="125px">
                  <statisticalDetails :point="rowList.plan_point_info" :detailForm="item.ruleForm"/>
                </el-form-item>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="文件编号：">
                      <span>{{item.file_no}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="版本号：">
                      <span>{{item.file_version}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="检验结果：">
                  <file-preview :file-list="[item]" :fileBtnOption="['preview']"/>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form-item>
          <el-form-item label="计算表格" prop="tableResults.computation_sheet" style="margin-top: 20px">
            <file-preview :file-list="formOpen.tableResults.computation_sheet" :fileBtnOption="['preview']"/>
          </el-form-item>
          <el-form-item label="检验图谱" prop="tableResults.inspection_map">
            <file-preview :file-list="formOpen.tableResults.inspection_map" :fileBtnOption="['preview']"/>
          </el-form-item>
        </div>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button plain size="small" @click="openReport = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'reportList',
    props: {
      formOpen: {
        type: Object,
        default() {
          return {
            tableResults: {
              id: '',
              report: [],//
              computation_sheet: [], //计算表格
              inspection_map: []//  检验图谱
            }
          }
        }
      },
      rowList: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    components: {
      statisticalDetails: () => import('../dealWith/list/tableDetails')
    },
    data() {
      return {
        activeNames: '',
        openReport: false
      }
    },
    //是计算属性，也可以理解为一个方法。
    computed: {},

    //属性是手动定义的所需监听的值
    watch: {
      rowList: {
        handler(newV) {
          if (newV && newV.inspection_result) {
            //this.activeNames = newV.inspection_result[0].batch_no
          }
        },
        deep: true,
        immediate: true
      }
    },

    //生命周期 - 创建完成（访问当前this实例）
    created() {
    },

    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },

    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      handleClick(val) {
        this.activeNames = val

      },
      openport() {
        this.openReport = true
        console.log(this.rowList, this.formOpen, '=--=-=-=-=-=123')
        setTimeout(() => {
          this.activeNames = this.rowList.inspection_result[0].batch_no
        }, 200)

      }

    }

  }

</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>
